<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            position: relative;
            width: 500px;
            height: 500px;
            /* background-color: seagreen; */
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: colorful 30s linear infinite;
        }
        @keyframes colorful{
            /*filter属性，允许对元素的外观进行各种图形效果处理，例如模糊、锐化、变色等
            hue-rotate()是filter属性众多可用的滤镜函数中的一种。它的作用是按照指定的角度值来旋转元素的色相（Hue）。
            色相可以简单理解为颜色的种类，在常见的色相环上，不同的角度对应着不同的颜色
            */
            100%{
                filter:hue-rotate(360deg)
            }
        }
        body{
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #081b29;
            overflow: hidden;
        }
        .bar-seconds,
        .number-hours{
            position: absolute;
            width: 100%;
            height: 100%;
            /* background: purple; */
            border-radius: 50%;
        }
        .bar-seconds span{
            position: absolute;
            transform: rotate(calc(var(--index) * 6deg));
            inset: -20px;
            text-align: center;
        }
        .bar-seconds span p{
            display: inline-block;
            width: 2px;
            height: 12px;
            background: #0ef;
            border-radius: 2px;
            box-shadow: 0 0 10px #0ef;
        }
        .bar-seconds span:nth-child(5n) p{
            background: red;
            width: 6px;
            height: 18px;
            transform: translateY(1px);
        }
        .number-hours span{
            position: absolute;
            transform: rotate(calc(var(--index) * 30deg));
            inset: 6px;
            text-align: center;
        }
        .number-hours span p{
            font-size: 52px;
            transform: rotate(calc(var(--index)*-30deg));
            color: #0ef;
            text-shadow: 0 0 10px #0ef;
        }
        .hands-box{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .hands-box .hand{
            position: absolute;
            border-radius: 50%;
            display: flex;
            justify-content: center;
        }
        .hands-box .hand i{
            display: inline-block;
            transform-origin: bottom;
            border-radius: 50%;
            box-shadow: 0 0 10px #0ef;
        }
        .hands-box .hours{
            width: 320px;
            height: 320px;
            
        }
        .hands-box .hours i{
            width: 8px;

            height: 160px;
            background: #0ef;
           
        }
        .hands-box .minutes{
            width: 450px;
            height: 450px;
           
        }
        .hands-box .minutes::before{
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 25px;
            height: 25px;
            background: #0ef;
            border-radius: 50%;
            box-shadow: 0 0 5px #0ef;
        }

        .hands-box .minutes i{
            width: 8px;
            
            height: 225px;
            background: #0ef;
           
        }
        .hands-box .seconds{
            width: 480px;
            height: 480px;
           
        }
        .hands-box .seconds::before{
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 0 2px rgba(0,0,0,0.5);
        }
        .hands-box .seconds i{
            width: 4px;
            
            height: calc(240px + 70px);
            background: white;
            box-shadow: none;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="bar-seconds"></div>
        <div class="number-hours"></div>
        <div class="hands-box">
            <div class="hand hours"><i></i></div>
            <div class="hand minutes"><i></i></div>
            <div class="hand seconds"><i></i></div> 
        </div>
    </div>
    <script>
        const numberHours = document.querySelector('.number-hours');
        const barSeconds = document.querySelector('.bar-seconds');
        const numberElement = [];
        const barElement = [];
        for(let i=1;i<=12;i++){
            numberElement.push(
                `<span style="--index:${i};"><p>${i}</p></span>`
            );
        };
        numberHours.insertAdjacentHTML("afterbegin",numberElement.join(""));

        for(let i = 1;i <= 60;i++){
            barElement.push(
                `<span style="--index:${i};"><p></p></span>`
            );
        };
        barSeconds.insertAdjacentHTML("afterbegin",barElement.join(""));

        const handHours = document.querySelector('.hand.hours');
        const handMinutes = document.querySelector('.hand.minutes');
        const handSeconds = document.querySelector('.hand.seconds');

        function getCurrentTime(){
            let date = new Date();
            let currentHours = date.getHours();
            let currentMinutes = date.getMinutes();
            let currentSeconds = date.getSeconds();

            handHours.style.transform = `rotate(${currentHours * 30 + currentMinutes / 2}deg)`;
            handMinutes.style.transform = `rotate(${currentMinutes * 6}deg)`;
            handSeconds.style.transform = `rotate(${currentSeconds * 6}deg)`;
        }
        getCurrentTime();

        setInterval(getCurrentTime,1000);

        document.documentElement.addEventListener('keyup',function(e){
            if(e.key === ' '){
                document.querySelector('.wrapper').style.display = 'none'
            };
        });
        document.documentElement.addEventListener('keyup',function(e){
            if(e.key === 'Enter'){
                document.querySelector('.wrapper').style.display = 'flex'
            };
        });
    </script>
</body>
</html>